﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <%--// Author: Otto Neff | webapps-in-action.com--%>
    <title>webapps-in-action.com</title>
    <telerik:RadStyleSheetManager ID="radStyleSheetManager" runat="server">
    </telerik:RadStyleSheetManager>
    <style type="text/css">
        .chartContainer {
            vertical-align: top;
        }
        body {
            font-family: Arial;
        }
        table {
            table-layout: fixed;
        }
        td {
            border-bottom: 1px #000 solid;
            vertical-align: top;
        }
        #status {
            font-size: 30px;
            color: red;
        }
    </style>
</head>
<body>
    <form id="form" runat="server">

        <telerik:RadScriptManager ID="radScriptManager" runat="server">
            <Scripts>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
                <asp:ScriptReference Path="~/leap.min.js" />
            </Scripts>
        </telerik:RadScriptManager>
        <telerik:RadAjaxManager ID="radAjaxManager" runat="server">
        </telerik:RadAjaxManager>
        <center>
            <div class="chartContainer">
                <telerik:RadHtmlChart ID="radHtmlChart" runat="server" Width="850px" Height="600px">
                    <ChartTitle Text="webapps-in-action.com">
                    </ChartTitle>
                    <PlotArea>
                        <Series>
                            <telerik:PieSeries DataFieldY="Barrels" ColorField="Color" ExplodeField="IsExploded"
                                NameField="Country">
                                <LabelsAppearance DataFormatString="{0:N0} bbl">
                                </LabelsAppearance>
                                <TooltipsAppearance Color="White" />
                            </telerik:PieSeries>
                        </Series>
                    </PlotArea>
                </telerik:RadHtmlChart>
                <div id="status">-</div>
                <table>
                    <tr>
                        <td>
                            <table>
                                <tr>
                                    <th>Monitoring</th>
                                    <th style="width: 200px">Value</th>
                                </tr>
                                <tr>
                                    <td>Rotation Axis</td>
                                    <td><span id="rotation-axis" /></td>
                                </tr>
                                <tr>
                                    <td>Rotation Angle</td>
                                    <td><span id="rotation-angle" /></td>
                                </tr>
                                <tr>
                                    <td>Rotation Matrix</td>
                                    <td><span id="rotation-matrix" /></td>
                                </tr>
                                <tr>
                                    <td>Scale Factor</td>
                                    <td><span id="scale-factor" /></td>
                                </tr>
                                <tr>
                                    <td>Motion Translation</td>
                                    <td><span id="motion-translation" /></td>
                                </tr>
                            </table>
                        </td>
                        <td>
                            <table>
                                <tr>
                                    <th>Monitoring</th>
                                    <th style="width: 200px">Value</th>
                                </tr>
                                <tr>
                                    <td>Hands</td>
                                    <td><span id="hands" /></td>
                                </tr>
                                <tr>
                                    <td>Pointables</td>
                                    <td><span id="pointables" /></td>
                                </tr>
                                <tr>
                                    <td>Translation</td>
                                    <td><span id="translation" /></td>
                                </tr>
                                <tr>
                                    <td>Scaling</td>
                                    <td><span id="scaling" /></td>
                                </tr>
                                <tr>
                                    <td>Rotation</td>
                                    <td><span id="rotation" /></td>
                                </tr>
                                <tr>
                                    <td>Gesture</td>
                                    <td><span id="gesture" /></td>
                                </tr>
                                <tr>
                                    <td>Gesture State</td>
                                    <td><span id="gesture-state" /></td>
                                </tr>
                                <tr>
                                    <td>Gesture Direction X</td>
                                    <td><span id="gesture-directionX" /></td>
                                </tr>
                                <tr>
                                    <td>Gesture Direction Y</td>
                                    <td><span id="gesture-directionY" /></td>
                                </tr>
                                <tr>
                                    <td>Gesture Direction Z</td>
                                    <td><span id="gesture-directionZ" /></td>
                                </tr>
                            </table>
                        </td>
                        <td>
                            <table>
                                <tr>
                                    <th>Monitoring</th>
                                    <th style="width: 200px">Value</th>
                                </tr>
                                <tr>
                                    <td>Palm Position X</td>
                                    <td><span id="palmPositionX" /></td>
                                </tr>
                                <tr>
                                    <td>Palm Position Y</td>
                                    <td><span id="palmPositionY" /></td>
                                </tr>
                                <tr>
                                    <td>Hand Radius</td>
                                    <td><span id="sphereRadius" /></td>
                                </tr>
                                <tr>
                                    <td>Sphere Center X</td>
                                    <td><span id="sphereCenterX" /></td>
                                </tr>
                                <tr>
                                    <td>Sphere Center Y</td>
                                    <td><span id="sphereCenterY" /></td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
        </center>
        <telerik:RadCodeBlock ID="radCodeBlock" runat="server">
            <script type="text/javascript">
                function getChart() {
                    return $find('<%=radHtmlChart.ClientID %>');
                }
                function Explode(next) {
                    var chart = getChart();
                    var status = "";
                    var currDataSource = $telerik.$.parseJSON(chart.get_dataSourceJSON());
                    for (var i = 0; i < currDataSource.length; i++) {
                        if (currDataSource[i].IsExploded) {
                            currDataSource[i].IsExploded = false;
                            var direction = 1;
                            status = "Explode RIGHT";
                            if (!next) {
                                direction = -1;
                                status = "Explode LEFT";
                            }
                            if (currDataSource[i + direction] != null) {
                                currDataSource[i + direction].IsExploded = true;
                                status += " Item " + (i + direction);
                                break;
                            } else {
                                if (i != 0) {
                                    currDataSource[0].IsExploded = true;
                                    status += " Item 0";
                                } else {
                                    currDataSource[currDataSource.length - 1].IsExploded = true;
                                    status += " Item " + (currDataSource.length - 1);
                                }
                                break;
                            }
                        }
                    }
                    $("#status").html(status);
                    chart.set_dataSource(currDataSource);
                    chart.repaint();
                }
                function RandomDataSourceGenerator() {
                    var chart = getChart();
                    var currDataSource = $telerik.$.parseJSON(chart.get_dataSourceJSON());
                    var randNum = function (min, max) {
                        return Math.floor(Math.random() * (max - min + 1)) + min;
                    }
                    for (var i = 0; i < currDataSource.length; i++) {
                        currDataSource[i].Barrels = randNum(10000, 90000);
                        currDataSource[i].IsExploded = false;
                    }
                    currDataSource[0].IsExploded = true;
                    chart.set_dataSource(currDataSource);
                    chart.repaint();
                    $("#status").html("New Data" + new Date());
                }
                var active = false;
                var lastFrame = {};
                var leapController = new Leap.Controller({ enableGestures: true });
                var startedGesture = "";
                var tolerance = 0;
                var refreshed = false;
                function DoRefresh() {
                    if (!refreshed) {
                        RandomDataSourceGenerator();
                        refreshed = true;
                        setTimeout(function () { refreshed = false; }, 5000);
                    }
                }
                function pageLoad() {
                    leapController.on('connect', function () {
                        //console.log("Successfully connected.");
                        leapController.loop(function (leapFrame) {
                            $("#hands").text(leapFrame.hands.length);
                            $("#pointables").text(leapFrame.pointables.length);
                            $("#translation").text(leapFrame._translation);
                            $("#scaling").text(leapFrame._scaleFactor);
                            $("#rotation").text(leapFrame.rotation);
                            if (!active && leapFrame.hands.length > 1 && leapFrame.pointables.length < 3) {
                                active = true;
                                lastFrame = leapFrame;
                            }
                            if (active && (leapFrame.pointables.length > 2 || leapFrame.hands.length < 2)) {
                                active = false;
                                DoRefresh();
                            }
                            if (active) {
                                $("#rotation-axis").text(leapFrame.rotationAxis(lastFrame));
                                $("#rotation-angle").text(leapFrame.rotationAngle(lastFrame, leapFrame.rotationAxis(lastFrame)));
                                $("#rotation-matrix").text(leapFrame.rotationMatrix(lastFrame));
                                $("#scale-factor").text(leapFrame.scaleFactor(lastFrame));
                                $("#motion-translation").text(leapFrame.translation(lastFrame));
                            }
                            if (leapFrame.hands.length == 1) {
                                var hand = leapFrame.hands[0];
                                $("#palmPositionX").text(hand.palmPosition[0]);
                                $("#palmPositionY").text(hand.palmPosition[1]);
                                $("#sphereRadius").text(hand.sphereRadius);
                                $("#sphereCenterX").text(hand.sphereCenter[0]);
                                $("#sphereCenterY").text(hand.sphereCenter[1]);
                            }
                            if (leapFrame.gestures.length > 0) {
                                leapFrame.gestures.forEach(function (gesture) {
                                    $("#gesture").text(gesture.type);
                                    $("#gesture-state").text(gesture.state);
                                    if (gesture.direction != null) {
                                        $("#gesture-directionX").text(gesture.direction[0]);
                                        $("#gesture-directionY").text(gesture.direction[1]);
                                        $("#gesture-directionZ").text(gesture.direction[2]);
                                    }
                                    if (gesture.state == "start") {
                                        if (startedGesture == "") {
                                            startedGesture = gesture.type;
                                            tolerance = 0;
                                        }
                                    }
                                    if (gesture.state == "update") {
                                        if (startedGesture == gesture.type) {
                                            tolerance++;
                                        }
                                    }
                                    if (gesture.state == "stop") {
                                        if (startedGesture == gesture.type) {
                                            doneEvent = false;
                                            if (tolerance > 10 && gesture.type == "circle") {
                                                if (gesture.normal[0] > 0.0) {
                                                    Explode(false);
                                                } else {
                                                    Explode(true);
                                                }
                                                doneEvent = true;
                                            }
                                            if (doneEvent) {
                                                tolerance = 0;
                                            }
                                            startedGesture = "";
                                        }
                                    }
                                });
                            }
                        });
                    });
                    leapController.on('deviceConnected', function () {
                        //console.log("A Leap device has been connected.");
                    });
                    leapController.on('deviceDisconnected', function () {
                        //console.log("A Leap device has been disconnected.");
                    });
                    leapController.connect();
                }
            </script>
        </telerik:RadCodeBlock>
        </div>
    </form>
</body>
</html>
